<!--
 * @Descripttion: GOGOGO
 * @version: 1.0.0
 * @Author: XJM
 * @Date: 2022-08-15 08:56:22
 * @LastEditors: XJM
 * @LastEditTime: 2022-08-22 21:44:11
-->
<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 白色内容区域 -->
        <div class="page_content">
            <!-- 搜索 -->
            <div class="flex">
                <div class="input_box">
                    <el-input v-model="searchParams.query" placeholder="请输入关键字" class="input-with-select">
                        <template #append>
                            <el-button @click="searchList">
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-input>
                </div>
            </div>
            <!-- 
              el-table 的 data:要展示的数据数组
              el-table-column：列 prop每条数据的对应属性
              label：列标题
              scope.row:相当于一条数据
             -->
            <!-- 用户表格 -->
            <el-table :data="goodsList" stripe style="width: 100%">
                <el-table-column prop="goods_id" label="商品ID" />
                <el-table-column prop="goods_name" label="商品名" width="200" />
                <el-table-column prop="goods_price" label="价格(￥)" />
                <el-table-column prop="goods_number" label="数量" />
                <el-table-column prop="goods_weight" label="商品重量(kg)" />
                <el-table-column label="添加时间" width="180">
                    <!-- 通过插槽格式化时间 -->
                    <template #default="scope">
                        {{ timeFormat(scope.row.add_time) }}
                    </template>
                </el-table-column>
                <el-table-column label="更新时间" width="180">
                    <!-- 通过插槽格式化时间 -->
                    <template #default="scope">
                        {{ timeFormat(scope.row.upd_time) }}
                    </template>
                </el-table-column>
                <el-table-column prop="hot_mumber" label="热销品数量" />
                <!-- 商品状态 -->
                <el-table-column prop="goods_state" label="商品状态">
                    <template #default="scope">
                        <p>{{ switchState(scope.row.goods_state) }}</p>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 数据分页 -->
        <div class="demo-pagination-block">
            <el-pagination v-model:currentPage="searchParams.pagenum" v-model:page-size="searchParams.pagesize"
                :page-sizes="[5, 10, 20, 40]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="searchList"
                @current-change="searchList" />
        </div>
    </div>
</template>

<script>
import { toRefs, reactive, ref } from 'vue';
import { goodsListApi } from '@/util/request.js'

export default {
    name: 'goods',
    setup() {
        const data = reactive({
            keyWord: "",
            searchParams: {
                // 查询参数
                query: "",
                // 每页有几条数据
                pagesize: 5,
                // 初始页在第几页
                pagenum: 1
            },
            // 数据条数
            total: 0,
            // 用户数据
            goodsList: [],
        })
        // 拿到商品数据
        const searchList = () => {
            goodsListApi(data.searchParams).then(res => {
                if (res.data) {
                    // 
                    console.log("商品数据", res);
                    data.goodsList = res.data.goods;
                    data.total = res.data.total;
                }
            })
        }
        // 商品状态
        const switchState = (state) => {
            switch (state) {
                case 0:
                    return "未通过"
                    break;
                case 1:
                    return "审核中"
                    break;
                case 2:
                    return "已审核"
                    break;
            }
        }
        // 格式化时间
        const timeFormat = (time) => {  //将毫秒转换为年月日时分秒
            let date = new Date(time * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            let Y = date.getFullYear() + '-';
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            let D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
            let h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':';
            let m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':';
            let s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds());
            return Y + M + D + h + m + s;
        }
        // 方法初始化
        searchList()
        return {
            ...toRefs(data),
            searchList,
            switchState,
            timeFormat
        }
    }
}
</script>

<style>
.demo-pagination-block {
    margin-top: 10px;
    margin-left: 50%;
    transform: translateX(-50%);
    display: block;
}
</style>